<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            position: relative;
        }
        img {
            width: 200px;
            vertical-align: top;
            padding: 5px;
        }
</style>
</head>
<body>
    <div class="box">
        <img src="./img/1.gif" alt="">
        <img src="./img/2.gif" alt="">
        <img src="./img/3.gif" alt="">
        <img src="./img/4.gif" alt="">
        <img src="./img/5.gif" alt="">
        <img src="./img/6.gif" alt="">
        <img src="./img/7.gif" alt="">
        <img src="./img/8.gif" alt="">
        <img src="./img/9.gif" alt="">
        <img src="./img/10.gif" alt="">
        <img src="./img/11.gif" alt="">
        <img src="./img/12.gif" alt="">
        <img src="./img/13.gif" alt="">
        <img src="./img/14.gif" alt="">
        <img src="./img/15.gif" alt="">
        <img src="./img/16.gif" alt="">
    </div>
</body>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
    $(function () {
        // 获取图片的宽度(200px)
        let imgWidth = $('img').outerWidth(); // 200

        waterfallHandler();

        // 瀑布流处理
        function waterfallHandler() {
            // 获取图片的列数
            let column = parseInt($(window).width() / imgWidth);

            // 高度数组
            let heightArr = [];
            for(let i=0; i<column; i++) {
                heightArr[i] = 0;
            }

            // 遍历所有图片进行定位处理
            $.each($('img'), function (index, item) {
                // 当前元素的高度
                let itemHeight = $(item).outerHeight();
                // 高度数组最小的高度
                let minHeight = Math.min(...heightArr);
                // 高度数组最小的高度的索引
                let minIndex = heightArr.indexOf(minHeight);

                $(item).css({
                    position: 'absolute',
                    top: minHeight + 'px',
                    left: minIndex * imgWidth + 'px'
                });

                heightArr[minIndex] += itemHeight;
            });
        }

        // 窗口大小改变
        $(window).resize(function () {
            waterfallHandler();
        });
    });
</script>
</html>